<template>
	<view class="ticket-content" v-if="ticketInfo">
		<view class="ticketDetails-container">
			<!-- 门票信息 -->
			<view class="ticketDetails">
				<view class="title-container">
					<image class="titleIcon" src="../../static/imgs/myTicket.png" mode=""></image>
					<view class="title">华东植物园门票</view>
					<view>1</view>
				</view>
				<view class="content-container">
					<view class="time">预约时间：{{ ticketInfo.travelDate | formatTime }}</view>
				</view>
			</view>
			<!-- 入馆凭证码 -->
			<view class="voucherCode">
				<view class="titleTbTr">入园凭证码</view>
				<view class="content">
					<view class="failure">
						<view class="ewm">
							<tki-qrcode
								ref="qrcode1"
								:cid="qrcode.cid"
								:val="qrcode.val"
								:size="qrcode.size"
								:unit="qrcode.unit"
								:background="qrcode.background"
								:foreground="qrcode.foreground"
								:pdground="qrcode.pdground"
								:lv="qrcode.lv" 
								:onval="qrcode.onval"
								:loadMake="qrcode.loadMake"
								:usingComponents="qrcode.usingComponents"
								:showLoading="qrcode.showLoading"
								:loadingText="qrcode.loadingText" />
						</view>
						<!-- <image class="ewm" src="../../static/logo.png" mode=""></image> -->
					</view>
					<view class="info">
						<view class="name">{{ ticketInfo.userInfo.name }}</view>
					</view>
					<view class="remarks">为保障公众权益，杜绝有偿代约行为，请观众凭已预约的二维码进园参观</view>
				</view>
			</view>
			<!-- 联系人 -->
			<view class="myBox">
				<view class="titleTbTr">联系人</view>
				<view class="content appointedBy">
					<view class="info">
						<view>姓名：{{ ticketInfo.userInfo.name }}</view>
						<view>证件类型：身份证</view>
						<view>证件号码：{{ ticketInfo.userInfo.idCardNo }}</view>
						<view>手机号：{{ ticketInfo.userInfo.mobile }}</view>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="information">
				<view class="title-container">
					<view class="title">订单信息</view>
				</view>
				<view class="content-container">
					<!-- <view class="">订单编号：{{ ticketInfo.ticketCode }}</view> -->
					<view>下单时间：{{ ticketInfo.createTime }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/server/getData.js'
	import * as utils from '@/utils/index.js'
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components:{
			tkiQrcode
		},
		filters:{
			formatTime(timeVal){
				return `${utils.moment.formatTime(timeVal,'YYYY-MM-DD')}(${utils.moment.formatTime(timeVal,'dddd').replace('星期','周')})`
			}
		},
		data(){
			return {
				options:null,
				ticketInfo:null,
				qrcode:{
					cid:'tki-qrcode-canvas',
					val:'',
					size:380,
					unit:'upx',
					background:'#ffffff',
					foreground:'#000000',
					pdground:'#000000',
					lv:3,
					onval:true,
					loadMake:true,
					usingComponents:true,
					showLoading:true,
					loadingText:'会员码生成中'
				}
			}
		},
		onLoad(options){
			this.options = options
			this.get_ticket_info()
		},
		methods:{
			async get_ticket_info(){
				try{
					const res = await api.order.byId({ticketNo:this.options.ticketCode})
					const user = await api.users.byId({id:res.touristId})
					this.ticketInfo = {
						...res,
						userInfo:user
					}
					this.qrcode.val = res.ticketCode
					console.log(this.ticketInfo)
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ticket-content{
		height: 100%;
		background-color: #f5f6fa;
		.ticketDetails-container{
			padding: 20rpx;
			.ticketDetails,.information{
				background-color: #FFF;
				border-radius: 10rpx;
				padding: 30rpx 40rpx;
				margin-bottom: 20rpx;
				.title-container{
					font-size: 0;
					display: flex;
					padding-bottom: 20rpx;
					border-bottom: 1px solid #ececec;
					.titleIcon{
						width: 40rpx;
						height: 40rpx;
					}
					.title{
						font-size: 26rpx;
						color: #333;
						font-weight: 500;
						margin-left: 10rpx;
					}
				}
				.content-container{
					padding-top: 20rpx;
					padding-bottom: 20rpx;
					font-size: 28rpx;
					color: #999;
					line-height: 1.573;
					.time{
						font-weight: 500;
						color: #333;
					}
				}
			}
		}
		.voucherCode{
			display: flex;
			background-color: #FFF;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			.content{
				padding: 20rpx;
				.failure{
					height: 380rpx;
					position: relative;
					margin-bottom: 8rpx;
					.ewm{
						width: 380rpx;
						height: 380rpx;
						position: absolute;
						left: 0;
						top: 0;
						right: 0;
						margin: auto;
					}
					.left{
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
					}
					.right{
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: 0;
					}
				}
				.info{
					font-size: 26rpx;
					text-align: center;
					.name{
						font-size: 36rpx;
						color: #076cfa;
						font-weight: 600;
					}
				}
				.remarks{
					margin-top: 6rpx;
					font-size: 28rpx;
					color: #f9871e;
					background-color: #fefbf1;
					border: 1px solid #ffb500;
					padding: 16rpx;
					line-height: 150%;
				}
			}
		}
		.myBox{
			display: flex;
			background-color: #FFF;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			.content{
				padding: 40rpx;
				
			}
			.info{
				font-size: 28rpx;
				color: #666;
				line-height: 1.573;
			}
			.accompanying{
				width: 100%;
				.accompanying_item{
					
				}
			}
		}
		.titleTbTr{
			background:linear-gradient(180deg,#0b6cf9 1%,#5bb7ff);
			color: #FFF;
			writing-mode: tb-rl;
			border-radius: 10rpx 0 0 10rpx;
			min-width: 64rpx;
			line-height: 64rpx;
			text-align: center;
			font-size: 26rpx;
			letter-spacing: 14rpx;
			font-weight: 650;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
		}
	}
</style>